<div id="login" class="login_wrapper">
    <div class="animate form login_form">
        <section class="login_content">
            <form action="javaScript:void(0)">
                <h1>管理系统登录</h1>
                <div>
                    <input type="text"
                           v-model="user.userName"
                           class="form-control"
                           placeholder="Username"
                           required="" />
                </div>
                <div>
                    <input type="password"
                           v-model="user.password"
                           class="form-control"
                           placeholder="Password"
                           required="" />
                </div>
                <div>
                    <input type="text"
                           v-model="user.verificationCode"
                           placeholder="请输入验证码"
                           class="form-control"
                           style="width: 65%;float: left;margin-bottom: 0px" />
                    <canvas id="canvas" @click="draw()" width="100px" height="36"></canvas>
                </div>
                <div style="text-align: left">
                    <input type="checkbox"
                           v-model="user.rememberMe"
                           style="margin: 10px 0" />&nbsp;&nbsp;Remember Me
                </div>
                <div>
                    <a @click="login()" class="btn btn-default submit" href="javascript:void(0)">Log in</a>
                    <a class="reset_pass" href="#">Lost your password?</a>
                </div>

                <div class="clearfix"></div>

                <div class="separator">
                    <p class="change_link">New to site?
                        <a href="/register" class="to_register"> Create Account </a>
                    </p>

                    <div class="clearfix"></div>
                    <br />

                    <div>
                        <h1><i class="fa fa-paw"></i> Java_Spring_Boot!</h1>
                        <p>©2021 All Rights Reserved. Java_Spring_Boot! is a Bootstrap 3 template. Privacy and Terms</p>
                    </div>
                </div>
            </form>
        </section>
    </div>
</div>
<script>
    var loginVue = new Vue({
        el: "#login",
        data: {
            user: {
                userName: "",
                password: "",
                rememberMe: false,
                verificationCode: "",
            },
            show_num:[],
        },
       methods: {
            login: function () {
                if (this.user.userName == "" || this.user.password == ""){
                    alert("Please input user name or password.");
                    return;
                }

                /*if (this.user.verificationCode == ""){
                    alert("验证码不能为空");
                    return;
                }else if (this.user.verificationCode.toLocaleLowerCase() != this.show_num.join("")){
                    /!*console.log(this.show_num.join(""));
                    console.log(this.user);*!/
                    alert("验证码有误");
                    return;
                }*/
                console.log(this.show_num.join(""));
                /*console.log(this.user);*/

                var self = this;
                $.ajax({
                    url: "/api/web/login",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(self.user),
                    success: function (rs) {
                        if (rs.status == 200){
                            window.location.href = "/test/index";
                        }else {
                            layer.msg(rs.message, { icon: 0 });
                        }
                    },
                    error: function (data) {
                        layer.alert(data.responseText, { icon: 0 });
                    },
                });
            },
           draw: function () {
               var canvas_width = $("#canvas").width();
               var canvas_height = $("#canvas").height();
               var canvas = document.getElementById("canvas"); //获取到canvas的对象
               var context = canvas.getContext("2d"); //获取到canvas画图的环境
               canvas.width = canvas_width;
               canvas.height = canvas_height;
               var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
               var aCode = sCode.split(",");
               var aLength = aCode.length; //获取到数组的长度

               for (var i = 0; i <= 3; i++) {
                   var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
                   var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
                   var txt = aCode[j]; //得到随机的一个内容
                   this.show_num[i] = txt.toLowerCase();
                   var x = 10 + i * 20; //文字在canvas上的x坐标
                   var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
                   context.font = "bold 23px 微软雅黑";

                   context.translate(x, y);
                   context.rotate(deg);

                   context.fillStyle = this.randomColor();
                   context.fillText(txt, 0, 0);

                   context.rotate(-deg);
                   context.translate(-x, -y);
               }
               for (var i = 0; i <= 5; i++) {
                   //验证码上显示线条
                   context.strokeStyle = this.randomColor();
                   context.beginPath();
                   context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                   context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                   context.stroke();
               }
               for (var i = 0; i <= 30; i++) {
                   //验证码上显示小点
                   context.strokeStyle = this.randomColor();
                   context.beginPath();
                   var x = Math.random() * canvas_width;
                   var y = Math.random() * canvas_height;
                   context.moveTo(x, y);
                   context.lineTo(x + 1, y + 1);
                   context.stroke();
               }
           },
           randomColor: function () {
               var r = Math.floor(Math.random() * 256);
               var g = Math.floor(Math.random() * 256);
               var b = Math.floor(Math.random() * 256);
               return "rgb(" + r + "," + g + "," + b + ")";
           },
       },
        mounted: function () {
            this.draw();
        },
    });
</script>